<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <!--default-active:当前激活的菜单menuActiveName或者home-->
      <!--菜单-->
      <el-menu
        index="aaaa"
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu">
        <!--1.添加el-menu-item导航首页-->
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <!--2.添加子导航即非首页导航-->
        <!--商品管理-->
        <el-submenu index="goods">
          <!--分组标题-->
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>商品管理</span>
          </template>
          <!--分组内容-->
          <el-menu-item-group>
            <!--内容添加子导航：添加品牌-->
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkbrand' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品品牌管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkcategory' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品类目管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoods' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品管理</span>
            </el-menu-item>
            <!--
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkdeliveryway' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品发货管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkdiscount' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">优惠卷管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodattribute' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品属性管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodimg' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品图片管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodsaddress' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">地址管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodscomment' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品评论管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkrepertory' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品仓库管理</span>
            </el-menu-item>
            -->
          </el-menu-item-group>
        </el-submenu>
        <!--用户管理-->
        <el-submenu index="users">
          <!--分组标题-->
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>用户管理</span>
          </template>
          <!--分组内容-->
          <el-menu-item-group>
            <!--内容添加子导航：浏览记录管理-->
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkbrowerrecord' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">浏览记录管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkcart' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">购物车管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkcollectgoods' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">用户收藏管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkuser' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkuseraddress' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">用户地址管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upksmscode' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">短信验证码管理</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="order">
          <!--分组标题-->
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>订单管理</span>
          </template>
          <!--分组内容-->
          <el-menu-item-group>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkorderaction' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkorderinfo' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">订单详情管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upktradeorder' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upktradesubgoodorder' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">子订单管理</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="app">
          <!--分组标题-->
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>APP管理</span>
          </template>
          <!--分组内容-->
          <el-menu-item-group>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkbanner' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">导航管理</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!--市场营销中心管理-->
        <el-submenu index="market">
          <!--分组标题-->
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>市场营销中心管理</span>
          </template>
          <!--分组内容-->
          <el-menu-item-group>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkdiscount' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">优惠卷管理</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!--3.添加动态子导航使用SubMenu即main-sidebar-sub-menu的组件-->
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes">
        </sub-menu>
        <!--测试-->
        <el-submenu index="demo">
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>demo</span>
          </template>
          <el-menu-item index="demo-echarts" @click="$router.push({ name: 'demo-echarts' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">echarts</span>
          </el-menu-item>
          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'demo-ueditor' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">ueditor</span>
          </el-menu-item>
        </el-submenu>
        <!--<el-submenu>
          &lt;!&ndash;2.1.添加导航标题&ndash;&gt;
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">测试中心</span>
          </template>
          &lt;!&ndash;2.2.添加导航Item放入到group中&ndash;&gt;
          <el-menu-item-group>
            <span slot="title">分组一只是不能点击没有折叠效果</span>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkbrand' })">
              &lt;!&ndash;2.2.1.添加icon&ndash;&gt;
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              选项3
              <span slot="title">选项3</span>
            </el-menu-item>
            &lt;!&ndash;添加品牌&ndash;&gt;
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkbrand' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">品牌管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkbanner' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">导航管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkbrowerrecord' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">浏览记录管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkcart' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">购物车管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkcategory' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品类目管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkcollectgoods' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">用户收藏管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkdeliveryway' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品发货管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodattribute' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品属性管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodimg' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品图片管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoods' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodsaddress' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">地址管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkgoodscomment' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品评论管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkorderaction' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkorderinfo' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">订单详情管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkrepertory' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">商品仓库管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upksmscode' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">短信验证码管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upktradeorder' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upktradesubgoodorder' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">子订单管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkuser' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'upkuseraddress' })">
              <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
              <span slot="title">用户地址管理</span>
            </el-menu-item>
          </el-menu-item-group>
          &lt;!&ndash;2.3.添加导航Item没有放入到group中&ndash;&gt;
          <el-menu-item index="demo-ueditor" @click="$router.push({ name: 'demo-ueditor' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">ueditor</span>
          </el-menu-item>
        </el-submenu>-->
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'
  import { isURL } from '@/utils/validate'
  export default {
    data () {
      return {
        dynamicMenuRoutes: []
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () { return this.$store.state.common.sidebarLayoutSkin }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      },
      menuActiveName: {
        get () { return this.$store.state.common.menuActiveName },
        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      mainTabsActiveName: {
        get () { return this.$store.state.common.mainTabsActiveName },
        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || ''
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>
